日期控件的值改变时触发事件问题

2023-06-01 03:20| 来源: 网络整理| 查看: 265

在input中添加一个日期控件，想日期改变的时候触发某个事件。一般来讲，下意识的就给那个input动态绑定了change事件，由于我使用的jquery-1.4.4所以是使用的live绑定。减缩代码如下：

$("#date").live("change",function(){ alert("yes"); //my_function..... });

绑定change后发现无效，我使用的是firefox和chrome。仔细检查没有拼写错误后，我将change事件改为click试试，发现可以弹出窗口，那就说明是change这个事件的原因。 google后，网上大部分说的是这种情况一般出现在低版本IE上，而且jquery live方法效率很低，在1.9版本后已经被抛弃了。为了解决这个问题，开始了几个小时的debug之旅。

首先我使用了jquery 1.11替换了1.4，并将live全部换成的on(这个页面不全是我写的)，确定替换之后没有其他兼容问题后发现on方法还是无法触发change事件然后又使用delegate试试，不行。又使用bind试试，还是不行。搜索之后发现还有onpropertychange(IE专用),和oninput(非IE)事件可以监听input值的改变，试过oninput之后不行，因为脚本修改的值不能触发oninput事件。将change改为click/blur之类的都可以正常触发查找change事件原理，发现change事件其实就是在元素获得焦点的时候，保存当前值，失去焦点的时候，会将当前值和原来保存起来的值进行比较，如果不同，则触发change事件。结论: 在绑定了日期控件之后绑定change事件，其实文本框的值是一直没有改变的，所以不会触发。测试：onFocus事件去掉，change事件就会正常触发。 $("#date").live("change",function(){ alert("yes"); //my_function..... }); $("#date").on("change",function(){ alert("yes"); //my_function..... }); $("body").delegate("#date","change",function(){ alert("yes"); //my_function..... }); $("#date").bind("change",function(){ alert("yes"); //my_function..... });

解决办法：再去想办法绑定change事件已经不符合实际情况了，于是想着是出现日期，选择日期后执行我的my_function。

于是就去看了日期控件的源码，发现最后其实是点击日期后，就会将点击的日期值赋值给文本框，然后关闭控件。由于我只想对这一个文本框执行my_function方法，所以给日期控件对象新增加了一个属性unblur，让它在关闭控件之前触发。然后在文本框触发focus事件时，显示控件，并且将我的my_function绑定给unblur 最后，在日期控件关闭后，就会触发my_function

心得：基础是十分的重要的！

【本文地址】

公司简介

联系我们